<template>
  <div class="content">
   <div class="center">
    <div class="hot-city">
      <h4>热门城市</h4>
      <div class="city">
        <span v-for="item in cities[0].city" :key="item" @click="jump(item)">{{item}}</span>
      </div>
    </div>
    <div class="shouzimu">
      <h4>快速查找城市</h4>
      <div class="zimu">
        <span v-for="a in cities.slice(1)" :key="a.indexes" @click.native="jumps(a.indexes) ">{{a.indexes}}</span>
      </div>
    </div>
    <div class="search-city" v-for="a in cities.slice(1)">    
      <h4  :id="a.indexes">{{a.indexes}}</h4>
      <div class="city" >
        <span v-for="b in a.city" @click="jump(b)">{{b}}</span>
      </div>
    </div>
   </div>
  </div>
</template>

<script setup lang="ts">
import {reactive,ref} from 'vue'
import httpApi from '@/http'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
interface City{
  city:[],
  indexes:string
}
const cities = ref<City[]>([])
httpApi.cityApi.queryAllcity().then(res =>{
  console.log(res);
  cities.value=res.data.data
})

function jump(a:string){
  localStorage.setItem('city',a)
  useStore().commit('update',a)
  useRouter().go(-1)
}

function jumps (a:string){
  window.scrollTo({
    'top':document.getElementById(a)?.offsetTop,
    behavior:'smooth'
  })
}
</script>

<style scoped lang="scss">
.content{
  border-top: 1px solid #E7E7E7;
  font-size: 14px;
  color: #999;
}
.center{
  .hot-city{
    margin-top: 20px;
    .city{
      background-color: #F8F8F8;
      margin-top: 10px;
      span{
        display: inline-block;
        width: 50px;
        padding: 10px;
        cursor: pointer;
      }
    }
  }
  .shouzimu{
    margin: 30px 0 50px;
    .zimu{
      margin-top: 10px;
      span{
        display: inline-block;
        //width: 30px;
        padding-top:5px;
		padding-right: 10px;
        margin: 5px ;
        cursor: pointer;
        &:active{
          background-color: #FB474F;
          color: #FFFFFF;
        }
      }
    }
  }
  .search-city{
    margin-top:50px;
    .city{
      background-color: #F8F8F8;
      margin-top: 10px;
      span{
        display: inline-block;
        width: auto;
        padding: 10px 20px 10px 10px;
        cursor: pointer;
      }
    }
  }
  h4{
    color: #666;   
	font-size: 16px;
  }
}

</style>